<template>
	<view>
		<!-- 搜索筛选区 -->
		<uni-data-picker placeholder="请选择商品分类" popup-title="请选择商品分类" :localdata="dataTree" v-model="classes"
			@change="onCategoryChange">
		</uni-data-picker>
		<!-- <view>
			<uni-data-select v-model="categoryId" :localdata="categories" placeholder="请选择商品分类"
				@change="onCategoryChange">
			</uni-data-select>
		</view> -->

		<!-- 商品列表区 -->
		<view>
			
			<uni-section v-for="item in goodsList" :key="item.id" :title="item.title" type="line">
						<uni-card :title="item.description" :sub-title='formatCurrency(item.price)'  :thumbnail="JSON.parse(item.images)[0]" :is-shadow="false">
							<text class="uni-body">{{item.position}}</text>
						</uni-card>
					</uni-section>
		</view>


		<uni-pagination :show-icon="true" :total="total" @change="navigator" :pageSize='pageSize'/>
		<!-- 悬浮按钮 -->

		<navigator url="/pages/market/goods/index" hover-class="navigator-hover">
			<uni-fab :buttons="buttons"></uni-fab>
		</navigator>
	</view>
</template>

<script>
	import {
		getGoodsList,
		getGoodsCategories,
		getGoodsCategoryTree,
	} from '@/api/goods'

	export default {
		name: 'market',

		data() {
			return {
				categoryId: '',
				categories: [{
						text: '全部',
						value: ''
					}
				],
				dataTree: [],
				classes: '',
				goodsList: [],
				buttons: [{
					text: '发布商品',
					iconPath: '/static/add.png',
					backgroundColor: '#FF5722'
				}],
				pageSize: 3,
				total: 0,
				pageNum: 1
			}
		},
		mounted() {
			this.loadGoodsList();
			// this.loadCatalist();
			this.loadGoodsCategoryTree();
		},
		methods: {
			// 加载商品列表
			loadGoodsList() {
				let d = { 'categoryId': this.categoryId, 'pageNum': this.pageNum, 'pageSize': this.pageSize }
				console.log(d)
				getGoodsList(d).then(response => {
				  this.goodsList = response.data.rows
				  this.total = response.data.total
				})
			},
			
			loadCatalist() {
				getGoodsCategories().then(response => {
				  response.data.rows.forEach((category, index)=>{
					  this.categories.push({'text': category.name, 'value': category.id})
				  })
				})
			},
			
			renameField(node, oldName, newName) {
			  if (!node || typeof node !== 'object') return node;
			
			  // 处理当前节点
			  const newNode = { ...node };
			  if (newNode[oldName] !== undefined) {
			    newNode[newName] = newNode[oldName];
			    delete newNode[oldName];
			  }
			
			  // 递归处理子节点
			  Object.keys(newNode).forEach(key => {
			    if (Array.isArray(newNode[key])) {
			      newNode[key] = newNode[key].map(child => this.renameField(child, oldName, newName));
			    } else if (typeof newNode[key] === 'object') {
			      newNode[key] = this.renameField(newNode[key], oldName, newName);
			    }
			  });
			
			  return newNode;
			},		
			loadGoodsCategoryTree() {
				getGoodsCategoryTree().then(response => {
				  response.data.rows.forEach((category, index)=>{
					  let t = this.renameField(category, 'name', 'text')
					  let v = this.renameField(t, 'id', 'value')
					  this.dataTree.push(v);
				  })
				})
			},

			// 分类变更处理
			onCategoryChange(e) {
				let item = e.detail.value
				this.categoryId = item[item.length - 1].value;
				// 根据分类筛选商品
				this.loadGoodsList();
			},
			
			formatCurrency(price) {
			      return `¥${price.toFixed(2)}`; // 例如：将 19.9 转为 "¥19.90"
			    },
			navigator({type,current}) {
				this.pageNum = current
				this.loadGoodsList()
			}
		},
	}
</script>

<style>
</style>